import React from 'react';
import docs from 'utils/docs';
import { Balloon, Tag } from '@teamix/ui';
import './lfsTag.scss';
import track from 'utils/track';
import intl from '../../locale';

export default class DeleteTag extends React.PureComponent {
  render() {
    return (
      <Balloon
        align="t"
        closable={false}
        type="normal"
        trigger={
          <span className="lfs-tag delete">
            <Tag>
              <span className="lfs-tag-left">Git LFS</span>
              <span className="lfs-tag-line" />
              <span>
                {intl.get({
                  id: 'code-assets.components.lfs.deleteTag.Deleted',
                  defaultMessage: '已删除',
                })}
              </span>
            </Tag>
          </span>
        }
      >
        {intl.get({
          id: 'code-assets.components.lfs.deleteTag.TheSourceFileHasBeen',
          defaultMessage: '源文件已删除，但 LFS 文件资源未释放，',
        })}

        <a
          href={docs('lfs-delete')}
          target="_blank"
          onClick={() => {
            track({
              action: 'clean_lfs_file',
              page: '',
              type: '',
              control: 'tag',
            });
          }}
          rel="noreferrer"
        >
          {intl.get({
            id: 'code-assets.components.lfs.deleteTag.HowToCleanUpLfs',
            defaultMessage: '如何彻底清理LFS文件',
          })}
        </a>
      </Balloon>
    );
  }
}
